<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/resources/commons/basejs.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctxPath}/resources/css/login.css">
</head>
<body>
<form id="loginForm">
    <div class="container-login">
        <h2 class="title">校园购物管理系统管理员登录</h2>
        <div class="layui-form-item">
            <label class="layui-icon layui-icon-username"></label>
            <input type="text" name="username" lay-verify="required" placeholder="用户名" class="layui-input">
        </div>
        <div class="layui-form-item">
            <label class="layui-icon layui-icon-password"></label>
            <input type="password" name="password" id="userPass" lay-verify="required" placeholder="密码" class="layui-input">
        </div>
        <div class="layui-form-item">
            <input type="checkbox" id="remember" name="remember" lay-skin="primary" title="记住密码">记住密码
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="loginSubmit">登  入</button>
        </div>
    </div>
</form>
</body>
<script>
    /*页面加载的时候就会执行*/
    layui.use(['form','layer'],function () {
        var form = layui.form;
        var layer = layui.layer;

        //回显是否记住密码（当登陆成功后就把密码存放到cookie里面）
        var adminIsRememberPwd = getCookie('adminIsRememberPwd');
        var adminPwd = getCookie('adminPwd');
        /*把密码自动填写上去*/
        $("#userPass").val(adminPwd);
        /*判断如果选择了记住密码，就把记住密码复选框传递的是true*/
        if(adminIsRememberPwd == '1'){
            $("#remember").attr('checked',true);
        }else{
            $("#remember").attr('checked',false);
        }
        //刷新元素组件
        form.render("checkbox");

        /*提交功能，使用ajax提交*/
        form.on("submit(loginSubmit)",function () {
            $.ajax({
                type:"POST",
                url:"requestLogin",/*要跳转的控制层url*/
                data:$("#loginForm").serialize(),/*把那个表单向后台提交的数据，要进行序列化serialize()*/
                success:function (res) { /*登陆成功后，判断记住密码返回的是true还是false，如果是true就把密码存储到cookie里面*/
                    /*登陆成功会从后端返回一个code为200*/
                    if(res.code==200){
                        //判断是否选中记住密码
                        var isRemember = $("#remember").is(":checked");
                        if(isRemember){
                            //把密码写到cookie里
                            setCookie("adminIsRememberPwd","1");
                            setCookie("adminPwd",$("#userPass").val());
                        }else{
                            setCookie("adminIsRememberPwd","0");
                            setCookie("adminPwd","");
                        }
                        /*弹出登陆成功，并跳转首页index（这里也是要在控制层写index的url）*/
                        layer.msg(res.msg,{icon:1,anim:2,time:1000},function () {
                            window.location.href="index";
                        });
                    }else {
                        layer.msg(res.msg,{icon:5,anim:6,time:3000});
                    }

                }
            });
        });
    });

    //放入cookie（当记住密码登陆成功时，就要把密码存储到cookie里面，方便下次登陆）
    function setCookie(cname,cvalue) {
        var exdays = 30;
        var d = new Date();
        /*过期时间*/
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        /*把时间转换成cookie格式*/
        var expires = d.toGMTString();
        /*放进去，cname账号，cvalue密码，expires过期时间*/
        document.cookie = cname + "=" + cvalue +"; expires=" + expires;
    }

    //从cookie中取值（自动登陆取cookie的值）
    function getCookie(cname) {
        var name = cname+"=";
        /*通过;分隔*/
        var ca = document.cookie.split(';');
        for(var i=0;i<ca.length;i++){
            var c = ca[i].trim();
            /*取到分隔后的第一个，就是账号和密码（只取到密码）通过传递过来的用户名取密码，看看有没有*/
            if(c.indexOf(name)==0){
                return c.substring(name.length,c.length);
            }
        }
        return "";
    }
</script>
</html>














